<template>
  <div class="bodyBox">
    <div style="display: flex; justify-content: center; width: 100%">
      <div class="boxBoy">
        <div>
          <el-carousel
            v-if="homeInfo.banner_images.length"
            :interval="5000"
            arrow="always"
            height="200px"
          >
            <el-carousel-item
              v-for="item in homeInfo.banner_images"
              :key="item"
            >
              <img :src="item" style="width: 100%" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-radio-group
          v-model="isView"
          style="margin-bottom: 20px"
          @input="changeView()"
        >
          <el-radio-button :label="true">直播间补贴</el-radio-button>
          <!-- <el-radio-button :label="false">百补秒杀补贴</el-radio-button> -->
        </el-radio-group>
        <div
          style="
            display: flex;
            justify-content: space-between;
            background-color: #ffffff;
            padding: 20px 10px;
            border-radius: 10px;
          "
        >
          <div style="flex: 1">
            <div
              style="
                width: 100%;
                background: #fff;
                border: 1px solid #1e6fff;
                border-radius: 20px;
                display: flex;
                justify-content: space-between;
              "
            >
              <input
                v-model="search_keyword"
                @keydown.enter="searchList"
                type="text"
                style="
                  flex: 1;
                  border: 0;
                  height: 40px;
                  outline: 0;
                  text-indent: 15px;
                  font-family: PingFangSC-Regular;
                  font-size: 12px;
                  color: #454d5a;
                  letter-spacing: 0;
                  background: 0 0;
                "
                placeholder="请输入搜索关键字"
              />
              <div class="icon-search hand-cursor" @click="searchList">
                <i
                  class="el-icon-search"
                  style="color: #1e6fff; font-size: 22px"
                ></i>
              </div>
            </div>
            <div style="margin: 20px 0">
              <div style="display: flex; flex-wrap: wrap" class="searchContent">
                <div class="grayFont">分类：</div>
                <div
                  class="tanbTitle hand-cursor"
                  v-for="it in homeInfo.product_categories"
                  :class="tabClickId == it.id ? 'selectStyle' : ''"
                  @click="tabClick(it)"
                  :key="it.id"
                >
                  {{ it.name }}
                </div>
              </div>
            </div>
            <div style="display: flex; flex-wrap: wrap" class="hand-cursor">
              <div class="grayFont">排序：</div>
              <div
                style="margin: 0 20px"
                :class="tabSortClickId == 1 ? 'selectSortStyle' : ''"
                @click="sortChange({ id: 1 }, 3)"
              >
                系统默认
              </div>
              <div
                :class="tabSortClickId == 2 ? 'selectSortStyle' : ''"
                @click="sortChange({ id: 2 }, 3)"
              >
                今日热销
              </div>
              <!-- <div style="margin: 0 10px">补贴排序</div>
              <div>价格排序</div> -->
              <div
                class="sort-right"
                :class="tabSortClickId == item.id ? 'selectSortStyle' : ''"
                @click="sortChange(item, index)"
                v-for="(item, index) in btnList"
                :key="index"
              >
                {{ item.lable }}
                <div class="box-icon">
                  <div
                    class="up"
                    :class="item.status === 1 ? 'opacity-5' : ''"
                  ></div>
                  <div
                    class="down"
                    :class="item.status === 1 ? 'opacity-1' : ''"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 40px"></div>
          <div style="width: 600px" class="userIncome">
            <div class="item">
              <div class="subItem">
                <div class="title">今日预估补贴</div>
                <div class="content">
                  ￥{{ userIncomeInfo.today_pay_income }}
                </div>
              </div>
              <div class="subItem">
                <div class="title">今日付款订单</div>
                <div class="content">
                  {{ userIncomeInfo.today_pay_order_count }}
                </div>
              </div>
              <!-- <div class="subItem">
                <div class="title">昨日付款预估</div>
                <div class="content">
                  ￥{{ userIncomeInfo.yesterday_pay_income }}
                </div>
              </div>
              <div class="subItem">
                <div class="title">本月付款预估</div>
                <div class="content">
                  ￥{{ userIncomeInfo.month_pay_income }}
                </div>
              </div>
              <div class="subItem">
                <div class="title">上月付款预估</div>
                <div class="content">
                  ￥{{ userIncomeInfo.last_month_pay_income }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="subItem">
                <div class="title">今日收货预估</div>
                <div class="content">
                  ￥{{ userIncomeInfo.today_end_income }}
                </div>
              </div>
              <div class="subItem">
                <div class="title">昨日收货预估</div>
                <div class="content">
                  ￥{{ userIncomeInfo.yesterday_end_income }}
                </div>
              </div>
              <div class="subItem">
                <div class="title">本月收货预估</div>
                <div class="content">
                  ￥{{ userIncomeInfo.month_end_income }}
                </div>
              </div>
              <div class="subItem">
                <div class="title">上月收货预估</div>
                <div class="content">
                  ￥{{ userIncomeInfo.last_month_end_income }}
                </div>
              </div> -->
            </div>
            <!-- <div
              style="display: flex; align-content: center; margin-bottom: 10px"
            >
              <img
                src="../assets/images/must-ico.png"
                alt=""
                srcset=""
                style="width: 20px; height: auto"
              />
              <span style="padding-left: 5px">必推爆品</span>
            </div> -->
            <!-- <div>
              <el-carousel
                height="120px"
                direction="vertical"
                :autoplay="true"
                indicator-position="none"
              >
                <el-carousel-item
                  v-for="item in homeInfo.recommend_products"
                  :key="item.id"
                >
                  <div class="carousel-item-box">
                    <div style="display: flex">
                      <img
                        :src="item.product_image"
                        alt=""
                        srcset=""
                        style="width: 90px; height: 90px; border-radius: 10px"
                        @click="handleLink(item)"
                      />
                      <div
                        style="
                          padding-left: 10px;
                          display: flex;
                          flex-direction: column;
                          justify-content: space-between;
                          width: 450px;
                        "
                      >
                        <div>
                          <div
                            style="
                              display: inline-block;
                              white-space: nowrap;
                              width: 100%;
                              overflow: hidden;
                              text-overflow: ellipsis;
                            "
                          >
                            {{ item.product_title }}
                          </div>
                          <div style="display: flex; gap: 30px">
                            <div style="font-size: 12px; color: #909399">
                              <span>到手价：</span>
                              <span style="color: red"
                                >￥{{ item.post_coupon_price }}</span
                              >
                            </div>
                            <div style="font-size: 12px; color: #909399">
                              <span>补贴：</span>
                              <span style="color: #409eff"
                                >￥{{ item.subsidy_amount }}</span
                              >
                            </div>
                          </div>
                        </div>
                        <div>
                          <div style="display: flex; gap: 30px">
                            <div style="font-size: 12px; color: #909399">
                              <span>商品库存：</span>
                              <span style="color: #e6a23c">{{
                                item.product_stock
                              }}</span>
                            </div>
                            <div style="font-size: 12px; color: #909399">
                              <span>活动开始时间：</span>
                              <span>{{ item.start_time }}</span>
                            </div>
                            <div style="font-size: 12px; color: #909399">
                              <span>活动结束时间：</span>
                              <span>{{ item.end_time }}</span>
                            </div>
                          </div>
                          <div class="carousel-item-box-ctr">
                            <div
                              style="
                                border-right: 1px solid rgba(225, 225, 225, 0.3);
                                color: #ffffff;
                                text-align: center;
                                width: 50%;
                              "
                              class="hand-cursor"
                              @click="handleLink(item)"
                            >
                              一键转链
                            </div>
                            <div
                              style="
                                color: #ffffff;
                                text-align: center;
                                width: 50%;
                              "
                              class="hand-cursor"
                              @click="collectionAdd(item.id, 1)"
                            >
                              加入合集
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div> -->
          </div>
        </div>
        <div style="height: 20px"></div>
        <div class="fastbuy-area">
          <div class="fastbuy">
            <div class="fastbuy-left">
              <p class="start-time">正在开抢</p>
              <!-- <div class="line"></div>
              <a href="/fastbuy/new_fastbuy" target="_blank" class="more">
                查看全部
                <i class="more-icon iconfont hdk-xiangyou"></i
              ></a> -->
              <p class="end-text">距离结束还剩</p>
              <p class="end-time">
                <em>{{ countTimeObj.h }}</em>
                时
                <em style="margin-left: 8px">{{ countTimeObj.m }}</em>
                分
                <em style="margin-left: 8px">{{ countTimeObj.s }}</em>
                秒
              </p>
            </div>
            <div class="fastbuy-box">
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item
                  v-for="(products, index) in homeInfo.recommend_products"
                  :key="index"
                >
                  <ul
                    class="inProduc-l-list js-inProducHover clearfix fastbuy-list"
                  >
                    <li
                      class="fastbuy-item"
                      v-for="item in products"
                      :key="item.id"
                    >
                      <div class="inProduc-top">
                        <div class="inProduc-l-ImgBox g-shop-top">
                          <img
                            :data-src="item.product_image"
                            :src="item.product_image"
                            lazy="loaded"
                          />
                          <div class="box_item_box_cter">
                            <div
                              style="
                                border-right: 1px solid rgba(225, 225, 225, 0.3);
                                color: #ffffff;
                                text-align: center;
                                width: 50%;
                              "
                              class="hand-cursor"
                              @click="handleLink(item)"
                            >
                              获取口令
                            </div>
                            <div
                              style="
                                color: #ffffff;
                                text-align: center;
                                width: 50%;
                              "
                              class="hand-cursor"
                              @click="collectionAdd(item.id, 1)"
                            >
                              加入合集
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="inProduc-l-conter info-box">
                        <div class="inProduc-l-m">
                          <h5 class="comHidden">
                            {{ item.product_title }}
                          </h5>
                        </div>
                        <div class="item-progress">
                          <p>补贴：￥{{ item.subsidy_amount }}</p>
                        </div>
                        <div class="goods-price">
                          <span class="price-text">券后价</span>
                          <span class="price-num"
                            >￥{{ item.post_coupon_price }}</span
                          >
                        </div>
                      </div>
                    </li>
                  </ul>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <!---->
        </div>

        <div v-if="isView">
          <div v-if="tableData.length == 0">
            <el-empty description="暂无商品"></el-empty>
          </div>
          <div class="box_container" v-else>
            <div
              class="box_item hand-cursor"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <div class="box_item_box">
                <div style="position: relative; border-radius: 10px">
                  <img
                    :src="item.product_image"
                    alt=""
                    style="
                      width: 100%;
                      height: 227px;
                      border-top-left-radius: 10px;
                      border-top-right-radius: 10px;
                    "
                    @click="handleLink(item)"
                  />
                  <div class="box_item_box_cter">
                    <div
                      style="
                        border-right: 1px solid rgba(225, 225, 225, 0.3);
                        color: #ffffff;
                        text-align: center;
                        width: 50%;
                      "
                      class="hand-cursor"
                      @click="handleLink(item)"
                    >
                      获取口令
                    </div>
                    <div
                      style="color: #ffffff; text-align: center; width: 50%"
                      class="hand-cursor"
                      @click="collectionAdd(item.id, 1)"
                    >
                      加入合集
                    </div>
                  </div>
                </div>

                <div style="padding: 0 10px">
                  <div
                    class="goodsTitle"
                    style="
                      border-bottom: 1px solid #c0c4cc;
                      padding: 10px 0;
                      color: #909399;
                    "
                  >
                    {{ item.product_title }}
                  </div>
                  <div style="padding: 10px 0; display: flex">
                    <div
                      class="list_item"
                      style="border-right: 1px solid #c0c4cc"
                    >
                      <div style="color: #909399; font-size: 12px">到手价</div>
                      <div style="color: red">
                        <span style="font-size: 12px">￥</span>
                        <span style="font-size: 16px">{{
                          item.post_coupon_price
                        }}</span>
                      </div>
                    </div>
                    <div
                      v-if="userInfo.invitation_status === 1"
                      class="list_item"
                      style="border-right: 1px solid #c0c4cc"
                    >
                      <div style="color: #909399; font-size: 12px">服务费</div>
                      <div style="color: green">
                        <span style="font-size: 12px">￥</span>
                        <span style="font-size: 16px">{{
                          item.push_subsidy_amount
                        }}</span>
                      </div>
                    </div>
                    <div class="list_item">
                      <div style="color: #909399; font-size: 12px">补贴</div>
                      <div style="color: #409eff">
                        <span style="font-size: 12px">￥</span>
                        <span style="font-size: 16px">{{
                          item.subsidy_amount
                        }}</span>
                      </div>
                    </div>
                  </div>
                  <div
                    style="
                      color: #909399;
                      font-size: 12px;
                      padding-bottom: 10px;
                      line-height: 20px;
                    "
                  >
                    <div style="font-size: 12px">
                      商品库存：<span style="color: #e6a23c">{{
                        item.product_stock
                      }}</span>
                    </div>
                    <div>活动开始时间：{{ item.start_time }}</div>
                    <!-- <div>活动结束时间：{{ item.end_time }}</div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style="text-align: center">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :total="pages.total"
              @current-change="handleCurrentChange"
              :current-page.sync="pages.page"
            >
            </el-pagination>
          </div>
        </div>
        <div v-else>
          <div v-if="seaData.length == 0">
            <el-empty description="暂无商品"></el-empty>
          </div>
          <div class="box_container">
            <div
              class="box_item hand-cursor"
              v-for="(item, index) in seaData"
              :key="index"
            >
              <div class="box_item_box">
                <div style="position: relative; border-radius: 10px">
                  <img
                    :src="item.mainImg"
                    alt=""
                    style="
                      width: 100%;
                      height: 227px;
                      border-top-left-radius: 10px;
                      border-top-right-radius: 10px;
                    "
                    @click="getTLink(item)"
                  />
                  <div class="box_item_box_cter">
                    <div
                      style="
                        border-right: 1px solid rgba(225, 225, 225, 0.3);
                        color: #ffffff;
                        text-align: center;
                        width: 100%;
                      "
                      class="hand-cursor"
                      @click="getTLink(item)"
                    >
                      获取淘口令
                    </div>
                  </div>
                </div>

                <div style="padding: 0 10px">
                  <div
                    class="goodsTitle"
                    style="
                      border-bottom: 1px solid #c0c4cc;
                      padding: 10px 0;
                      color: #909399;
                    "
                  >
                    {{ item.itemName }}
                  </div>
                  <div style="padding: 10px 0; display: flex">
                    <div
                      class="list_item"
                      style="border-right: 1px solid #c0c4cc"
                    >
                      <div style="color: #909399; font-size: 12px">到手价</div>
                      <div style="color: red">
                        <span style="font-size: 12px">￥</span>
                        <span style="font-size: 16px">{{
                          item.post_coupon_price || 0
                        }}</span>
                      </div>
                    </div>
                    <div
                      class="list_item"
                      style="border-right: 1px solid #c0c4cc"
                    >
                      <div style="color: #909399; font-size: 12px">佣金</div>
                      <div style="color: green">
                        <span style="font-size: 12px">￥</span>
                        <span style="font-size: 16px">{{
                          item.commissionAmount
                        }}</span>
                      </div>
                    </div>
                    <div class="list_item">
                      <div style="color: #909399; font-size: 12px">补贴</div>
                      <div style="color: #409eff">
                        <span style="font-size: 12px">￥</span>
                        <span style="font-size: 16px">{{
                          item.subsidy_amount || 0
                        }}</span>
                      </div>
                    </div>
                  </div>
                  <div
                    style="
                      color: #909399;
                      font-size: 12px;
                      padding-bottom: 10px;
                      line-height: 20px;
                    "
                  >
                    <div style="font-size: 12px">
                      商品库存：<span style="color: #e6a23c">{{
                        item.quantity
                      }}</span>
                    </div>
                    <div>活动开始时间：{{ item.start_time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :total="seaPage.total"
              :page-size="seaPage.limit"
              @current-change="seaCurrentChange"
              :current-page.sync="seaPage.page"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="kefu">
        <div
          class="rightTab hand-cursor"
          @click="getCollection"
          style="border-top-left-radius: 7px; border-top-right-radius: 7px"
        >
          <i class="el-icon-s-goods"></i>
          <div style="font-size: 14px">合集</div>
        </div>
        <div class="rightTab hand-cursor rightNavTwo">
          <i class="el-icon-service"></i>
          <div style="font-size: 14px">联系客服</div>
        </div>
        <div class="hover-image">
          <img :src="contactInfo.qrcode" style="width: 100px; height: 100px" />
        </div>
        <div
          class="rightTab hand-cursor"
          @click="scrollToTop"
          style="
            border-bottom-right-radius: 7px;
            border-bottom-left-radius: 7px;
          "
        >
          <i class="el-icon-top"></i>
          <div style="font-size: 14px">回到顶部</div>
        </div>
      </div>
    </div>
    <div class="com-new-footer">
      <div class="foooter-center">
        <p class="des">
          © 2011-2024 亿品悦动 <a target="_blank" href="/">yipinkeji.cn</a>
          <span>|</span> 公司地址：<a
            href="https://sr.ffquan.cn/dtk_www/20220812/cbqql0tjcdvbu07g5hr00.png"
            target="_blank"
            >湖北省武汉市江夏区光谷大道金融港A3栋2层1号</a
          >
          <span>|</span>
          <a
            href="https://sr.ffquan.cn/dtk_www/20240329/co37171kgp9obl64inr00.jpg"
            target="_blank"
            >营业执照</a
          >
          <span class="line">|</span>
          <a
            class="ga"
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51019002002469"
          >
            <img
              src="https://p1static.dataoke.com/web/img/beian.png?t=202108191436"
            />
            鄂ICP备20009800号
          </a>
        </p>
        <a
          class="ico"
          target="cyxyv"
          href="https://v.yunaq.com/certificate?domain=www.dataoke.com&amp;from=label&amp;code=90030"
        ></a>
      </div>
    </div>

    <el-drawer
      title="合集"
      :visible.sync="productsDrawer"
      direction="rtl"
      size="25%"
    >
      <div style="width: 90%; margin: 0 auto">
        <div>
          <el-tag
            class="hand-cursor"
            :key="tag.id"
            v-for="(tag, index) in dynamicTags"
            :closable="index > 0"
            :disable-transitions="false"
            @close="handleClose(tag)"
            @click="handleClick(tag)"
            :type="chooseTag === tag.type ? 'success' : ''"
          >
            {{ tag.collection_name }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 添加合集</el-button
          >
        </div>
        <div style="height: 20px"></div>
        <div style="height: 700px; overflow-y: scroll">
          <div
            class="goodsItem"
            style="display: flex; align-items: center; position: relative"
            v-for="(item, index) in goodsData"
            :key="index"
            @mouseenter="goodsBtnId = item.id"
            @mouseleave="goodsBtnId = ''"
          >
            <el-checkbox
              v-model="item.isSelect"
              @change="multipleChoice(item, $event)"
            ></el-checkbox>
            <div
              class="goodsInfo"
              style="background-color: #f8f8f8; padding: 10px; width: 100%"
            >
              <div style="display: flex; align-content: center; width: 100%">
                <div>
                  <img
                    :src="item.product_image"
                    alt=""
                    srcset=""
                    style="width: 60px; height: 60px; border-radius: 10px"
                  />
                </div>
                <div style="padding-left: 10px" class="textContent">
                  <div style="color: #666" class="title">
                    {{ item.product_title }}
                  </div>
                  <div style="color: #999; font-size: 14px">
                    到手价：<span style="color: red; font-size: 10px">￥</span>
                    <span style="color: red">{{ item.post_coupon_price }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-show="goodsBtnId == item.id"
              style="position: absolute; top: 5px; right: 15px"
              class="hand-cursor btns"
            >
              <span class="tag" @click="handleTop(item)">置顶</span>
              <span class="delbtn" @click="delGoods(item)">删除</span>
            </div>
          </div>
        </div>
        <div
          style="
            display: flex;
            background-color: #f8f8f8;
            padding: 20px 0;
            padding-left: 10px;
          "
        >
          <el-checkbox v-model="selectAll">全选</el-checkbox>

          <span
            style="margin: 0 20px"
            @click="multipleChoiceDel()"
            class="hand-cursor"
            >删除</span
          >

          <el-dropdown
            @command="handleCommand"
            :disabled="
              !dynamicTags.filter((item) => item.type != this.chooseTag).length
            "
          >
            <span style="color: green" class="hand-cursor">同步至</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="tag in dynamicTags.filter(
                  (item) => item.type != this.chooseTag
                )"
                :command="tag.type"
                :key="tag.id"
                >{{ tag.collection_name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>

          <span
            style="color: red; flex: 1; text-align: right; margin-right: 10px"
            class="hand-cursor"
            @click="copyAllLink()"
            >复制合集链接</span
          >
        </div>
      </div>
    </el-drawer>
    <el-dialog title="淘口令" :visible.sync="linkDialog.visible" width="600px">
      <div
        style="
          width: 100%;
          height: 100%;
          background-color: #ffffff;
          white-space: pre-wrap;
          line-height: 25px;
        "
        v-html="linkDialog.link.deep_link_template"
      ></div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="$copyText(linkDialog.link.common_template)"
          >复制口令</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="公告"
      :visible.sync="noticeVisible"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <div v-html="homeNotice"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="noticeVisible = false"
          >我已知晓</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      noticeVisible: false,
      homeNotice: "",
      isView: true,
      goodsBtnId: "",
      linkDialog: {
        visible: false,
        link: {},
      },
      tableData: [],
      seaData: [],
      goodsData: [],
      tabSortClickId: 1,
      btnList: [
        { lable: "补贴排序", status: 2, id: 3 },
        { lable: "价格排序", status: 2, id: 4 },
      ],
      tabClickId: 999,
      productsDrawer: false,
      // selectAll: false,
      selectIdList: [], //选中的集合
      dynamicTags: [],
      chooseTag: 0,
      inputVisible: false,
      inputValue: "",
      homeInfo: {},
      userIncomeInfo: {
        today_pay_income: 0,
        today_end_income: 0,
        yesterday_pay_income: 0,
        yesterday_end_income: 0,
        month_pay_income: 0,
        month_end_income: 0,
        last_month_pay_income: 0,
        last_month_end_income: 0,
        today_pay_order_count: 0,
      },
      pages: {
        page: 1,
        limit: 50,
        total: 100,
      },
      seaPage: {
        page: 1,
        limit: 50,
        total: 100,
      },
      search_keyword: "",
      contactInfo: {},
      countTimeObj: {},
      userInfo: {},
    };
  },
  computed: {
    selectAll: {
      get() {
        let flag = true;
        this.selectIdList = [];
        //读取的时候触发
        this.goodsData.forEach((el) => {
          //迭代lists中为isCheck
          if (el.isSelect === false) {
            //当子选项有一个为false时，则全选设置为false
            flag = false;
          } else {
            this.selectIdList.push(el);
          }
        });
        if (this.goodsData.length == 0) {
          flag = false;
        }
        return flag;
      },
      set(val) {
        if (val) {
          //判断如果全选被选中，则其他的子选项全部选中，如果全选被取消，则其他的所有子选项取消选中
          this.goodsData.map(function (el) {
            return (el.isSelect = true);
          });
          this.selectIdList = this.goodsData;
        } else {
          this.goodsData.map((el) => (el.isSelect = false));
          this.selectIdList = [];
        }
      },
    },
  },
  mounted() {
    this.getSeaList();
    this.homePopShow();
  },
  methods: {
    searchList() {
      if (this.isView) {
        this.getGoodsList();
      } else {
        this.getSeaList();
      }
    },
    homePopShow() {
      this.$api.getHomePop({ source: 1 }).then((res) => {
        if (res.data.is_pop == 1) {
          this.homeNotice = res.data.pop_content;
          this.noticeVisible = true;
        }
      });
    },
    getSeaList() {
      let down = null;
      if (
        this.btnList.findIndex((item) => item.id === this.tabSortClickId) != -1
      ) {
        down = this.btnList.filter((item) => item.id === this.tabSortClickId)[0]
          .status;
      }
      this.seaData = [];
      this.$api
        .getSeaListFatch({
          page: this.seaPage.page,
          limit: this.seaPage.limit,
          order_by: this.tabSortClickId,
          search_keyword: this.search_keyword,
          up_down: down,
        })
        .then((res) => {
          this.seaData = res.data.list;
          this.seaPage.total = res.data.total;
        });
    },
    changeView() {
      if (this.isView) {
        this.pages.page = 1;
        this.getGoodsList();
      } else {
        this.seaPage.page = 1;
        this.getSeaList();
      }
    },
    handleCommand(command) {
      this.$api
        .collectionSync({
          coll_type: this.chooseTag,
          sync_coll_type: command,
        })
        .then(() => {
          this.$message.success("操作成功");
        });
    },
    tabClick(e) {
      this.tabClickId = e.id;
      this.getGoodsList();
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth", // 平滑滚动
      });
    },
    changeNull(row, column, cellValue) {
      if (cellValue) {
        return cellValue;
      } else if (cellValue == 0) {
        return "0";
      } else {
        return "暂无";
      }
    },
    headClass() {
      return "text-align:center;background:#E6E9F0;color: rgb(31, 46, 77);height:56px";
    },
    sortChange(item, index) {
      this.tabSortClickId = item.id;
      if (index !== 3) {
        this.btnList[index].status === 2
          ? (this.btnList[index].status = 1)
          : (this.btnList[index].status = 2);
      }
      this.pages.page = 1;
      if (this.isView) {
        this.getGoodsList();
      } else {
        this.getSeaList();
      }
    },
    handleAllChecked(v) {
      // 实现全选，反选(点击会传递true或者false过来)
      this.goodsData.map((item) => {
        item.isSelect = v;
      });
    },
    multipleChoice(item, e) {
      // 单个选中
      // console.log('选中的集合11---', e)
      if (e) {
        this.selectIdList.push(item); // 追加进去
      } else {
        let index = this.selectIdList.indexOf(item.id); // 求出当前id的所在位置
        this.selectIdList.splice(index, 1); // 删除
      }
      // console.log('选中的集合22---', this.selectIdList)
    },
    delGoods(item) {
      this.$api
        .collectionDelete({
          product_ids: item.id,
          coll_type: this.chooseTag,
        })
        .then(() => {
          this.$api.collection({ coll_type: this.chooseTag }).then((res) => {
            res.data.product_list.forEach((element) => {
              element.isSelect = false;
            });
            this.goodsData = res.data.product_list;
            this.selectIdList = [];
          });
          this.$message({
            message: "删除成功",
            type: "success",
          });
        });
    },
    handleTop(item) {
      this.$api
        .collectionTop({
          product_id: item.id,
          coll_type: this.chooseTag,
        })
        .then(() => {
          this.$api.collection({ coll_type: this.chooseTag }).then((res) => {
            res.data.product_list.forEach((element) => {
              element.isSelect = false;
            });
            this.goodsData = res.data.product_list;
            this.selectIdList = [];
          });
          this.$message({
            message: "操作成功",
            type: "success",
          });
        });
    },
    multipleChoiceDel() {
      //多选删除
      console.log("选中的集合---", this.selectIdList);
      if (this.selectIdList.length == 0) {
        this.$message({
          type: "error",
          message: "未选中商品",
        });
      } else {
        this.$api
          .collectionDelete({
            product_ids: this.selectIdList.map((item) => item.id).join(","),
            coll_type: this.chooseTag,
          })
          .then(() => {
            this.$api.collection({ coll_type: this.chooseTag }).then((res) => {
              res.data.product_list.forEach((element) => {
                element.isSelect = false;
              });
              this.goodsData = res.data.product_list;
              this.selectIdList = [];
            });
            this.$message({
              message: "删除成功",
              type: "success",
            });
          });
      }
    },
    copyAllLink() {
      this.$api.collectionCopy({ coll_type: this.chooseTag }).then((res) => {
        this.$copyText(res.data.collection_link);
      });
    },

    handleClose(tag) {
      this.$api.collectionCateDelete({ coll_type: tag.type }).then(() => {
        this.getCollection();
      });
    },
    handleClick(tag) {
      this.chooseTag = tag.type;
      this.$api.collection({ coll_type: this.chooseTag }).then((res) => {
        res.data.product_list.forEach((element) => {
          element.isSelect = false;
        });
        this.goodsData = res.data.product_list;
        this.selectIdList = [];
      });
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      if (!this.inputValue) {
        this.$message.error("请输入合集名称！");
        return;
      }
      this.$api
        .collectionCateAdd({ coll_name: this.inputValue })
        .then((res) => {
          if (res.code === 200) {
            this.$api.collectionCate().then((cate) => {
              this.dynamicTags = cate.data;
              this.inputVisible = false;
              this.inputValue = "";
            });
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    chunkArray(array, size) {
      let result = [];
      for (let i = 0; i < array.length; i += size) {
        result.push(array.slice(i, i + size));
      }
      return result;
    },
    getHomeInfo() {
      this.$api.getHomeInfo().then((res) => {
        res.data.recommend_products = this.chunkArray(
          res.data.recommend_products,
          5
        );
        this.homeInfo = res.data;
        this.homeInfo.product_categories.unshift({
          id: 999,
          name: "全部",
        });
      });
      this.$api.userIncome().then((res) => {
        this.userIncomeInfo = res.data;
      });
      this.$api.getContact().then((res) => {
        this.contactInfo = res.data;
      });
    },
    getGoodsList() {
      this.tableData = [];
      let params = {
        ...this.pages,
        product_cate: this.tabClickId,
        order_by: this.tabSortClickId,
        search_keyword: this.search_keyword,
      };
      if (
        this.btnList.findIndex((item) => item.id === this.tabSortClickId) != -1
      ) {
        params.up_down = this.btnList.filter(
          (item) => item.id === this.tabSortClickId
        )[0].status;
      }
      this.$api.getGoodsList({ ...params }).then((res) => {
        this.tableData = res.data.list;
        this.pages.total = res.data.total;
      });
    },
    handleCurrentChange(val) {
      this.pages.page = val;
      this.getGoodsList();
    },
    seaCurrentChange(val) {
      this.seaPage.page = val;
      this.getSeaList();
    },
    getCollection() {
      this.$api.collectionCate().then((cate) => {
        this.dynamicTags = cate.data;
        this.chooseTag = this.dynamicTags[0].type;
        this.$api.collection({ coll_type: this.chooseTag }).then((res) => {
          res.data &&
            res.data.product_list.forEach((element) => {
              element.isSelect = false;
            });
          this.goodsData = res.data ? res.data.product_list : [];
          this.productsDrawer = true;
        });
      });
    },

    collectionAdd(product_id, coll_type) {
      this.$api
        .collectionAdd({
          product_id,
          coll_type,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    getTLink(item) {
      this.$api
        .getSeaCodeFatch({
          itemDetailId: item.itemDetailId,
        })
        .then((res) => {
          if (res.code == 200) {
            this.linkDialog.link = res.data;
            this.linkDialog.visible = true;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    handleLink(item) {
      this.$api
        .deepLink({
          product_id: item.id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.linkDialog.link = res.data;
            this.linkDialog.visible = true;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    countTime() {
      //获取当前时间
      let date = new Date();
      let now = date.getTime();
      //设置截止时间
      let str = this.$moment().add(1, "days").format("YYYY-MM-DD 00:00:00");
      let endDate = new Date(str);
      let end = endDate.getTime();

      //时间差
      let leftTime = end - now;
      //定义变量 d,h,m,s保存倒计时的时间
      let d, h, m, s;
      if (leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        m = Math.floor((leftTime / 1000 / 60) % 60);
        s = Math.floor((leftTime / 1000) % 60);
      }
      this.$set(this, "countTimeObj", {
        d,
        h,
        m,
        s,
      });
      setTimeout(this.countTime, 1000);
    },
  },
  created() {
    this.getHomeInfo();
    this.getGoodsList();
    this.countTime();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-radio-button__inner {
  height: 80px;
  width: 220px;
  line-height: 51px;
  font-size: 19px;
}
.bodyBox {
  font-size: 14px;
}
.bodyBox::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  background: url(../assets/images/body_bg.png) center top no-repeat !important;
  background-size: auto 1400px !important;
}
.hand-cursor {
  cursor: pointer;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-header {
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.tanbTitle {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  /* width: 100px;
  height: 30px; */
  padding: 5px 20px;
  margin: 0 5px;
  /* border: 1px solid #dcdfe6; */
  /* border-radius: 10px; */
}
.selectStyle {
  /* border: 1px solid #409eff; */
  color: #ffffff;
  border-radius: 25px;
  /* background-color: #ecf5ff; */
  background: linear-gradient(to right, #feb47b, #ff6232);
}

.box_container {
  display: flex;
  flex-wrap: wrap;
}

.box_item {
  width: 20%; /* 每个盒子宽度为20%，一行可以放5个 */
  box-sizing: border-box;
}
.box_item:not(:nth-child(5n)) {
  padding-right: 12px;
}
.box_item_box {
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  border-radius: 10px;
  &:hover {
    outline: 1px solid #ff6232;
  }
}

.list_item {
  width: 50%;
  text-align: center;
}

.boxBoy {
  width: 1200px;
  margin: 0 auto;
  /* border: 1px solid red; */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* 自定义滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #dbddde;
  border-radius: 20px;
}
/* 设置滚动条的宽度 */
::-webkit-scrollbar {
  width: 10px;
}

.kefu {
  width: auto;
  position: fixed;
  right: 20px;
  bottom: 100px;
  background-color: #fff;
  box-shadow: 0 10px 20px 0 rgba(76, 126, 233, 0.4);
  border-radius: 7px;
  z-index: 400;
}
.rightTab {
  text-align: center;
  /* margin-bottom: 20px; */
  padding: 10px;
}

.hover-image {
  position: absolute;
  top: 40px;
  left: -130px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 10px 20px 0 rgba(76, 126, 233, 0.4);
  border-radius: 7px;
  opacity: 0;
  transition: opacity 0.5s ease; /* 平滑过渡效果 */
}
.rightNavTwo:hover + .hover-image {
  opacity: 1;
}

.icon-search {
  width: 40px;
  height: 40px;
  display: flex;
  align-content: center;
  // justify-content: center;
  align-items: center;
}

// 排序
.sort-right {
  padding: 0 20px;
  // height: 32px;
  // color: #505363;
  // font-weight: 400;
  // font-size: 14px;
  // margin-left: 10px;
  // border: 1px solid rgb(233, 231, 231);
  display: flex;
  justify-content: center;
  align-content: center;
  // line-height: 32px;
  cursor: pointer;
}
.sort-right:hover {
  // color: #217aff;
  // border: 1px solid #217aff;
  // .up {
  //   border-bottom: 6px solid #ff5500;
  // }
  // .down {
  //   border-top: 6px solid #ff5500;
  // }
}
.opacity-5 {
  opacity: 0.5;
}
.opacity-1 {
  opacity: 1 !important;
}
.box-icon {
  height: 30px;
  margin-top: 4px;
  .up {
    width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
    height: 0px;
    border-bottom: 6px solid #a3a5b3;
    border-left: 4px solid transparent; /*transparent 表示透明*/
    border-right: 4px solid transparent;
    margin-bottom: 4px;
  }
  .down {
    width: 0px;
    height: 0px;
    opacity: 0.5;
    border-top: 6px solid #a3a5b3;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }
}
.box-icon div {
  height: 10px;
  margin-left: 4px;
}

.selectSortStyle {
  color: #ff5500;
  .up {
    border-bottom: 6px solid #ff5500;
  }
  .down {
    border-top: 6px solid #ff5500;
  }
}

.carousel-item-box {
  border-radius: 10px;
  padding: 20px;
  // background: linear-gradient(to right, #feb47b ,#ff6232);
  // background: linear-gradient(180deg, #ffe9e3, hsla(0, 47%, 96%, 0) 90%);
  background: linear-gradient(180deg, #ffe9e3, #fff);
  border: 1px solid #f5f5f5;
}

.box_item_box_cter {
  background-color: #ff851b;
  height: 30px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 1;
}
.box_item_box:hover .box_item_box_cter {
  opacity: 1;
}
.inProduc-l-ImgBox:hover .box_item_box_cter {
  opacity: 1;
}
.carousel-item-box-ctr {
  background-color: #ff851b;
  height: 20px;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 12px;
  opacity: 0;
}
.carousel-item-box:hover .carousel-item-box-ctr {
  opacity: 1;
}

.el-tag + .el-tag {
  margin-left: 10px;
  // margin-bottom: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.searchContent {
  align-items: center;
}
.grayFont {
  color: #999;
}
.goodsTitle {
  white-space: nowrap; // 强制一行显示
  overflow: hidden; // 超出隐藏
  text-overflow: ellipsis; // 省略号
}
.goodsItem {
  display: flex;
  position: relative;
  align-items: center;
  margin-bottom: 10px;
  .goodsInfo {
    margin: 0 10px;
    border-radius: 5px;
    .textContent {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .title {
        width: 200px;
        white-space: nowrap; // 强制一行显示
        overflow: hidden; // 超出隐藏
        text-overflow: ellipsis; // 省略号
      }
    }
  }
  .btns {
    .tag {
      padding: 3px 5px;
      background: rgba(16, 168, 143, 0.9);
      color: #fff;
      font-size: 12px;
      cursor: pointer;
      margin-right: 5px;
    }
    .delbtn {
      padding: 3px 5px;
      background: rgba(250, 6, 6, 0.884);
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }
  }
}
.com-new-footer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.foooter-center {
  margin-top: 20px;
  width: 1200px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  .des {
    font-size: 12px;
    color: #898d96;
    padding-left: 110px;
    span {
      margin: 0 15px;
    }
    a {
      color: #898d96;
    }
  }
}
.userIncome {
  display: flex;
  flex-direction: column;
  border: 2px solid #ccc;
  border-radius: 5px;
  .item {
    width: 100%;
    flex: 1;
    display: flex;
    .subItem {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &:nth-of-type(n + 2) {
        &::before {
          content: "";
          width: 1px;
          height: 60%;
          background-color: #ccc;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .title {
        color: #909399;
      }
      .content {
        font-weight: bold;
        font-size: 16px;
        margin-top: 5px;
      }
    }
  }
}
.fastbuy-area {
  height: 290px;
  position: relative;
  margin-bottom: 20px;
}

.fastbuy {
  display: flex;
  height: 290px;
  background-color: #fff;
  background-image: url(http://img-haodanku-com.cdn.fudaiapp.com/FsvsGAk4UUqCT1LpKJrM8hkVJ0nN);
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px 0 rgba(12, 8, 62, 0.08);
  border-radius: 0px 5px 5px 0px;
}

.fastbuy .fastbuy-left {
  width: 184px;
  height: 100%;
  padding-left: 20px;
  position: relative;
}

.fastbuy .fastbuy-left .start-time {
  margin-top: 62px;
  line-height: 14px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #fff;
}

.fastbuy .fastbuy-left .line {
  width: 164px;
  height: 1px;
  box-sizing: border-box;
  margin-top: 12px;
  background: #e6e6e6;
  opacity: 0.1;
}

.fastbuy .fastbuy-left .more {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fff;
  line-height: 14px;
  cursor: pointer;
}

.fastbuy .fastbuy-left .more .more-icon {
  font-size: 16px;
  color: #fff;
  line-height: 16px;
}

.fastbuy .fastbuy-left .end-text {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 12px;
  position: absolute;
  left: 20px;
  bottom: 48px;
}

.fastbuy .fastbuy-left .end-time {
  display: flex;
  align-items: flex-end;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
  line-height: 12px;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.fastbuy .fastbuy-left .end-time em {
  margin-right: 3px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  line-height: 18px;
}

.fastbuy .fastbuy-box {
  width: 1080px;
  height: 290px;
  box-sizing: border-box;
  margin-left: 16px;
  background: #fff;
  border-radius: 10px;
}

.fastbuy .fastbuy-box .fastbuy-list {
  display: flex;
  width: 100%;
  height: 290px;
  box-sizing: border-box;
  list-style: none;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item {
  width: 180px;
  height: 270px;
  background: #fff;
  border-radius: 10px;
  padding: 0;
  margin: 0;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item:hover .video-btn {
  display: block;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item:hover .deposit618 {
  display: none;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .inProduc-top {
  width: 180px;
  height: 160px;
  box-sizing: border-box;
  padding: 20px 20px 0;
}

.fastbuy
  .fastbuy-box
  .fastbuy-list
  .fastbuy-item
  .inProduc-top
  .inProduc-l-ImgBox {
  width: 100%;
  height: 100%;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .video-btn {
  display: none;
  transform: translate(-50%, -50%) scale(0.7);
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .inProduc-l-ImgBottom {
  width: 100%;
  left: 0%;
  border-radius: 0 0 10px 10px;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .inProduc-l-ImgBottom span {
  width: auto;
  padding: 6px 4px;
  font-size: 12px;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .inProduc-l-ImgBox > em {
  padding: 2px 4px;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .inProduc-l-ImgBox > p {
  top: 30px;
  height: 20px;
  line-height: 18px;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .info-box {
  width: 100%;
  height: 110px;
  padding: 10px 0 0;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .info-box h5 {
  padding: 0;
  margin: 0;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .info-box .item-progress {
  width: 140px;
  height: 35px;
  box-sizing: border-box;
  margin: 10px auto 0;
  padding-top: 5px;
  background: linear-gradient(
    90deg,
    #ff4d41 0%,
    #ff6048 45%,
    #ff6048 55%,
    #ff703d 100%
  );
  border-radius: 5px;
  position: relative;
}

.fastbuy
  .fastbuy-box
  .fastbuy-list
  .fastbuy-item
  .info-box
  .item-progress::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 7px 0 7px;
  border-color: #ff4d41 transparent transparent transparent;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .info-box .item-progress p {
  text-align: center;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fff;
  line-height: 26px;
  margin-top: 0;
}

.fastbuy
  .fastbuy-box
  .fastbuy-list
  .fastbuy-item
  .info-box
  .item-progress
  .progress-xian {
  width: 130px;
  height: 8px;
  background: #f3f3f3;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  padding: 2px;
}

.fastbuy
  .fastbuy-box
  .fastbuy-list
  .fastbuy-item
  .info-box
  .item-progress
  .progress-xian
  i {
  height: 4px;
  background: linear-gradient(90deg, #fb5045 0%, #ff703c 100%);
  border-radius: 2px;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .info-box .goods-price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding-top: 13px;
}

.fastbuy
  .fastbuy-box
  .fastbuy-list
  .fastbuy-item
  .info-box
  .goods-price
  .price-text {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #5379fc;
  line-height: 14px;
}

.fastbuy
  .fastbuy-box
  .fastbuy-list
  .fastbuy-item
  .info-box
  .goods-price
  .price-num {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #5379fc;
  line-height: 14px;
}

.fastbuy
  .fastbuy-box
  .fastbuy-list
  .fastbuy-item
  .inProduc-l-de
  .g-shoplist-footer {
  padding: 12px 8px;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .inProduc-l-de .from {
  display: block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #999;
}

.fastbuy .fastbuy-box .fastbuy-list .fastbuy-item .inProduc-l-de .from:hover {
  color: #5490ff;
}
.inProductWrap {
  margin-top: 46px;
}

.inProduc-top {
  position: relative;
}

.inProduc-left {
  float: left;
  width: 79%;
}

.inProduc-l-list > li {
  width: 23.5%;
  margin-left: 2%;
  float: left;
  margin-bottom: 28px;
  position: relative;
  background-color: #fff;
  border-radius: 10px;
}

// .inProduc-l-list>li:hover,.inProduc-t-list>li:hover {
//     -webkit-transform: translateY(-4px);
//     transform: translateY(-4px);
//     box-shadow: 0 4px 12px 2px rgba(0,0,0,0.1);
//     -webkit-box-shadow: 0 4px 12px 2px rgba(0,0,0,0.1);
//     z-index: 10
// }

.inProduc-l-list > li:nth-child(4n + 1) {
  margin-left: 0;
}

.inProduc-l-ImgBox {
  position: relative;
  background-color: #fff;
  color: #fff;
  width: 100%;
  height: 240px;
  cursor: pointer;
  border-radius: 3px 3px 0 0;
}

.inProduc-l-ImgBox > p {
  display: none;
  position: absolute;
  top: 38px;
  right: 0;
  min-width: 40px;
  height: 25px;
  border-radius: 13px 0 0 13px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 10px;
  line-height: 25px;
  text-align: center;
  font-size: 12px;
  z-index: 10;
}

.inProduc-l-ImgBox > p:hover {
  color: #eee;
}

.inProduc-l-ImgBox > p em {
  margin-left: 4px;
}

.inProduc-l-ImgBox > img {
  width: 100%;
  height: 100%;
  border-radius: 3px 3px 0 0;
}
.comHidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
